<template>
  <div class="main">
    <myForm
      ref="myForm"
      :dataForm="dataForm"
      :formItem="formItem"
      :confimText="'确认'"
      @cancel="cancel"
      @handleSubmit="handleSubmit"
    />
  </div>
</template>

<script>
import { isPhone, isPassWord, isCode } from '@/utils/validate';
import myForm from '../../record/components/myForm.vue';
import { putUserInfo } from '@/api/user';

export default {
  name: 'userInfo',
  components: { myForm },
  props: {
    dataForm: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      formItem: [
        {
          key: 'portrait',
          label: '头像',
          propsType: 'upload',
          limit: 1,
          hasNoTigs: true,
          type: 11
        },
        {
          key: 'userName',
          label: '用户名',
          propsType: 'input'
        },
        {
          key: 'userAccount',
          label: '手机号',
          propsType: 'input',
          onChange: () => {
            this.formItem[3].hasHidden = false;
          }
        },
        {
          key: 'code',
          label: '验证码',
          propsType: 'phoneCode',
          hasHidden: true
        },
        {
          key: 'email',
          label: '邮箱',
          propsType: 'input'
        }
      ]
    };
  },
  methods: {
    handleSubmit(values) {
      if (!isPhone(values.userAccount)) {
        this.$message.error('手机号码有误，请重新填写');
        return;
      }
      if (!this.formItem[3].hasHidden && !isCode(values.code)) {
        this.$message.error('验证码有误，请重新填写');
        return;
      }
      const params = {
        id: this.dataForm.id,
        ...values
      };
      putUserInfo(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功');
          this.$emit('cancel', true);
        }
      });
    },
    cancel() {
      this.$emit('cancel');
    },
    resetFields() {
      this.formItem[3].hasHidden = true;
      this.$refs.myForm.resetFields();
    }
  }
};
</script>

<style scoped lang="scss"></style>
